<template>
  <div id="main"
       style='width: 100%; height: 100%;'></div>
</template>

<script>
import echarts from 'echarts'
export default {
  mounted () {
    this.getpicturedata()
  },
  data () {
    return {
      opction: {
        length: [],
        yAxis: [],
        xAxis: [],
        series: []
      }
    }
  },
  methods: {
    picture () {
      var myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        title: {
          text: '商品数据统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        ...this.opction
      })
    },
    getpicturedata () {
      this.$http.get('reports/type/1').then(res => {
        let { meta, data } = res.data
        if (meta.status === 200) {
          this.opction = data
          this.opction.xAxis[0].type = 'category'
          this.opction.xAxis[0].boundaryGap = false
          this.picture()
        }
      })
    }
  }
}
</script>

<style>
</style>
